<template>
  <view class="demo-page">
    <!-- 触发按钮：打开录音弹框 -->
    <button class="trigger-btn" @click="showRecorder = true">
      按住说话（语音输入）
    </button>

    <!-- 显示识别结果 -->
    <view class="result-container" v-if="recognitionResult">
      <text class="result-label">识别结果：</text>
      <text class="result-text">{{ recognitionResult }}</text>
    </view>

    <!-- 语音录音组件 -->
    <VoiceRecorderModal 
      v-model:visible="showRecorder"
      @result="handleRecognitionResult" 
      @cancel="handleRecognitionCancel"  
      @update:visible="handleVisibleChange"  
    />
  </view>
</template>

<script lang="ts" setup>
import VoiceRecorderModal from '../../components/Voice/VoiceRecorderModal.vue';
import { ref } from 'vue';

// 1. 控制录音弹框显示/隐藏
const showRecorder = ref(false);

// 2. 存储识别结果
const recognitionResult = ref('');

// 3. 识别成功：获取语音转文字结果
const handleRecognitionResult = (result: string) => {
  recognitionResult.value = result;
  console.log('语音识别结果：', result);
  // 后续逻辑：如提交表单、显示在输入框等
};

// 4. 取消录音：用户点击关闭或遮罩层
const handleRecognitionCancel = () => {
  console.log('用户取消录音');
  // 可选：添加取消后的提示（如“已取消语音输入”）
  uni.showToast({ title: '已取消语音输入', icon: 'none' });
};

// 5. 监听弹框显示/隐藏状态变化
const handleVisibleChange = (isVisible: boolean) => {
  showRecorder.value = isVisible;
  // 可选：弹框关闭后重置结果
  if (!isVisible) {
    recognitionResult.value = '';
  }
};
</script>

<style scoped lang="scss">
.demo-page {
  padding: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
}

.trigger-btn {
  padding: 20rpx 40rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  cursor: pointer;
}

.result-container {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
}

.result-label {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.result-text {
  font-size: 32rpx;
  color: #333;
}
</style>